<template>
    <s-layout title="店铺等级成长体系">
        <view class="ss-modal-box ss-flex-col">
            <view class="header">
                <view class="uni-margin-wrap">
                    <view class="userinfo">
                        <div class="avtor">
                            <image mode="widthFix" src="/static/store/contentCenter.png"></image>
                        </div>
                        <div class="name">XXXXXX</div>
                    </view>
                    <indextest></indextest>
                    <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
                        :interval="interval" :duration="duration">
                        <swiper-item>
                            <view class="swiper-item uni-bg-red">
                                <image style="width:100%" mode="widthFix" src="/static/store/pt.png"></image>
                                <iamge mode="widthFix" class="now" src="/static/store/now.png"></iamge>
                                <view class="num">达到还需完成16单可解锁</view>
                                <view class="action">
                                    <view class="action-item">
                                        1050套餐
                                    </view>
                                    <view class="action-item">
                                        1680套餐
                                    </view>
                                </view>
                            </view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-green">
                                <image style="width:100%" mode="widthFix" src="/static/store/hj.png"></image>
                                <view class="action">
                                    <view class="action-item">
                                        1050套餐
                                    </view>
                                    <view class="action-item">
                                        1680套餐
                                    </view>
                                </view>
                            </view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-blue">
                                <image style="width:100%" mode="widthFix" src="/static/store/bj.png"></image>
                                <view class="action">
                                    <view class="action-item">
                                        1050套餐
                                    </view>
                                    <view class="action-item">
                                        1680套餐
                                    </view>
                                </view>
                            </view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-blue">
                                <image style="width:100%" mode="widthFix" src="/static/store/xy.png"></image>
                                <view class="action">
                                    <view class="action-item">
                                        1050套餐
                                    </view>
                                    <view class="action-item">
                                        1680套餐
                                    </view>
                                </view>
                            </view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-blue">
                                <image style="width:100%" mode="widthFix" src="/static/store/ry.png"></image>
                                <view class="action">
                                    <view class="action-item">
                                        1050套餐
                                    </view>
                                    <view class="action-item">
                                        1680套餐
                                    </view>
                                </view>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
            <view class="quanyi">
                <div class="content">
                    <div class="title">
                        <p> 店铺等级权限</p>
                        <image mode="widthFix" src="/static/store/line.png"></image>
                    </div>
                    <div class="qylist">
                        <div class="list" v-for="n in 5" :key="n">
                            {{ n }}.XXXXXXXXXXXXXXXXXXXXXXXXX
                        </div>
                    </div>
                </div>
            </view>
            <view class="friends">
                <view class="left">您的好用已完成23单</view>
                <view class="c">好友下单记录
                    <uni-icons type="right" size="14"></uni-icons>
                </view>
            </view>
            <view class="task">
                <div class="title">
                    <p>任务</p>
                    <image mode="widthFix" src="/static/store/line.png"></image>
                </div>
                <view class="lists">
                    <view class="list" v-for="n in 5" :key="n">
                        <div class="left">
                            <div class="ms">
                                <div class="shopName">在XXX店铺完成该任务</div>
                                <div class="notion">凑单50元以上</div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="action">
                                <div class="left">
                                    <image mode="widthFix" src="/static/store/go1.png"></image>
                                </div>
                                <div class="right">
                                    <image mode="widthFix" src="/static/store/share1.png"></image>
                                </div>
                            </div>
                        </div>
                    </view>
                </view>
            </view>
            <div class="recommend">

                <div class="tabs">
                    <div class="tab" v-for="(item, index) in tabs" :key="index" :class="{ active: index == tabIndex }"
                        @click="tabClick(index)">
                        {{ item }}
                    </div>
                </div>
                <div class="goods">
                    <div class="good" v-for="(item, index) in goods" :key="index">
                        <div class="title">{{ item.title }}</div>
                        <div class="sort">{{ item.slot }}</div>
                        <div class="price">
                            {{ item.price }}
                        </div>
                    </div>
                </div>
            </div>
            <view class="team">
                <div class="title">
                    <p>我的团队</p>
                    <image mode="widthFix" src="/static/store/line.png"></image>
                </div>
                <div class="team-list">
                    <div class="member" v-for="n in 10" :key="n">
                        <view class="icon">
                            <image mode="widthFix" :src="sheep.$url.cdn('/static/store/member.png')"></image>
                        </view>
                        <div class="level">

                        </div>
                        <div class="small">
                            X
                        </div>
                        <div class="name">XXXXX</div>
                    </div>
                </div>
            </view>
        </view>
    </s-layout>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import indextest from './components/indextest.vue';
import { onLoad } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { useDurationTime } from '@/sheep/hooks/useGoods';

const tabs = ["荣耀店铺", '星耀店铺', '砖石店铺', '黄金店铺']
const tabIndex = ref(0)
const goods = ref([
    {
        title: '商品名称',
        slot: 20,
        price: 100,

    },
    {
        title: '商品名称',
        slot: 20,
        price: 100,

    },
    {
        title: '商品名称',
        slot: 20,
        price: 100,

    },
    {
        title: '商品名称',
        slot: 20,
        price: 100,

    }, {
        title: '商品名称',
        slot: 20,
        price: 100,

    },
    {
        title: '商品名称',
        slot: 20,
        price: 100,

    },
    {
        title: '商品名称',
        slot: 20,
        price: 100,

    },
    {
        title: '商品名称',
        slot: 20,
        price: 100,

    }, {
        title: '商品名称',
        slot: 20,
        price: 100,

    },
    {
        title: '商品名称',
        slot: 20,
        price: 100,

    },
    {
        title: '商品名称',
        slot: 20,
        price: 100,

    },
    {
        title: '商品名称',
        slot: 20,
        price: 100,

    },
    {
        title: '商品名称',
        slot: 20,
        price: 100,

    }, {
        title: '商品名称',
        slot: 20,
        price: 100,

    },
    {
        title: '商品名称',
        slot: 20,
        price: 100,

    }
])
const tabClick = (index) => {
    tabIndex.value = index
}
const toOpenShop = () => {
    console.log(111111);

    uni.navigateTo({
        url: '/pages/store/openShop'
    })
}
</script>

<style lang="scss" scoped>
.ss-modal-box {
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    background: #171819;
}

.userinfo {
    width: 100%;
    text-align: center;
    .avtor {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        overflow: hidden;
        margin: 10rpx auto;
        image {
            width: 100%;
        }
    }

}

.header {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;

    .swiper {
        height: 400rpx;

        .swiper-item {

            // position: relative;
            .now {
                position: absolute;
                top: 0;
                left: 0;
                width: 60rpx;
            }

            .num {
                position: absolute;
                top: 140rpx;
                left: 40rpx;
                color: #9e9e9e;
            }

            .action {
                position: absolute;
                bottom: 60rpx;
                right: 90rpx;

                .action-item {
                    padding: 10rpx 20rpx;
                    border-radius: 99999rpx;
                    background: #333842;
                    color: #fff;
                    font-size: 26rpx;
                    margin-bottom: 10rpx;
                }
            }
        }
    }

}

.quanyi {
    padding: 20rpx;
    color: #fff;
    border-radius: 20rpx;

    .content {
        background: #232526;
        text-align: center;
        padding: 50rpx 20rpx;
        border-radius: 20rpx;

        .title {
            font-size: 28rpx;
            font-weight: bold;
        }

        .qylist {
            text-align: left;

            .list {
                margin-top: 20rpx;
            }
        }
    }
}


.friends {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, #ffe6d0, #fff);
    padding: 10rpx;
    box-sizing: border-box;
    margin-top: 50rpx;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    position: relative;
    z-index: 999;

    .left {
        color: #f0862a;
        font-weight: 600;
    }

    .right {
        display: flex;
        justify-content: start;
        align-items: center;
    }
}

.task {
    width: 90%;
    margin: 20rpx auto;
    padding: 20rpx;
    margin-top: 80rpx;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    background: #232526;
    margin-top: 130rpx;

    .title {
        font-size: 30rpx;
        color: #fff;
        font-weight: bold;
        text-align: center;
    }

    .lists {
        margin-top: 20rpx;
        box-sizing: border-box;

        .list {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 15rpx;

            .left {
                display: flex;
                align-items: center;
                justify-content: start;

                image {
                    width: 80rpx;
                    margin-right: 20rpx;
                }

                .shopName {
                    font-weight: bold;
                    color: #9E9E9E;
                    font-size: 30rpx;
                }

                .notion {
                    font-size: 24rpx;
                    color: #9E9E9E;
                    margin-top: 10rpx;
                }
            }

            .right {
                width: 30%;

                .action {
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    border: 2rpx solid #feeaac;
                    border-radius: 99999rpx;
                    background: #fff;

                    .left,
                    .right {
                        text-align: center;
                        padding: 15rpx 10rpx;
                        height: 35rpx;
                    }

                    .left {
                        background: #ffeba9;
                        border-radius: 99999rpx;
                        width: 60%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }

                image {
                    width: 60rpx;
                }
            }
        }
    }

    .all {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20rpx;
        font-size: 28rpx;
        font-weight: bold;
    }
}

.recommend {
    background: #171819;

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20rpx;
        font-size: 30rpx;
        font-weight: bold;
    }

    .tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        position: sticky;
        top: 0;
        z-index: 999999;
        background: #171819;

        .tab {
            color: #9E9E9E;
            font-size: 28rpx;

        }

        .active {
            color: #f0862a;
            font-weight: bold;
        }
    }

    .goods {
        padding: 10rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        min-height: 800rpx;

        .good {
            width: 49.5%;
            background: #fff;
            text-align: center;
            height: 500rpx;
            margin-bottom: 20rpx;
            border-radius: 20rpx;
        }
    }
}

.team {
    padding: 20rpx;
    width: 90%;
    background: #232526;
    box-sizing: border-box;
    margin: 150rpx auto 0;

    .title {
        font-size: 30rpx;
        font-weight: bold;
        color: #fff;
        text-align: center;
    }

    .team-list {
        width: 100%;
        height: 600rpx;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        align-items: center;

        .member {
            width: 20%;
            text-align: center;
            color: #fff;
            position: relative;
            margin: 10rpx;

            .icon {
                width: 120rpx;
                height: 120rpx;
                border-radius: 50%;
                border: 4rpx solid #fff;
                overflow: hidden;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .level {
                width: 40rpx;
                height: 40rpx;
                position: absolute;
                top: 0;
                right: 0;
                background: #fff;
            }

            .small {
                padding: 3rpx 6rpx;
                border-radius: 10rpx;
                color: #fff;
                background: #555cea;
                font-size: 24rpx;
                width: 80%;
                margin: -30rpx auto 0;

            }

            .name {
                margin-top: 20rpx;
            }
        }
    }
}
</style>